<template>
    <div class="address-page">
        <headBar isBack="show">
            <div slot="xm-header-center">
                <div class="xm-header-title">{{pageTitle}}</div>
            </div>
            <div slot="xm-header-right"></div>
        </headBar>
        <div class="address-group">
            <div class="item flex flex-pack-justify border-bottom">
                <label>收货人</label>
                <input placeholder="请输入收货人姓名" class="flex-1" v-model="form.contactor">
            </div>
            <div class="item flex flex-pack-justify border-bottom">
                <label>联系电话</label>
                <input placeholder="请输入联系电话" class="flex-1" v-model="form.phone">
            </div>
            <div class="item flex flex-pack-justify border-bottom">
                <label>所在地</label>
                <div class="flex-1 address-select">
                    <span @click="isShow=true" v-if="!provinceName">请选择所在地</span>
                    <span @click="isShow=true">{{provinceName}}{{cityName}}</span>
                </div>
            </div>
            <div class="item flex flex-pack-justify border-bottom">
                <label>详细地址</label>
                <input placeholder="请输入详细地址" class="flex-1" v-model="form.address">
            </div>
            <div class="notice" v-show="notice">
                <p class="error">{{notice}}</p>
            </div>
        </div>
        <section class="bottom-section">
            <div class="foot-bar flex">
                <a href="javascript:void(0)" class="cancel" @click="back">取消</a>
                <a href="javascript:void(0)" class="sub flex-1" @click="save">确定</a>
            </div>
        </section>
        <changeAddress v-show="isShow" :provinceId="form.provinceId" :cityId="form.cityId" :provinceName="provinceName"></changeAddress>
    </div>
</template>
<script>
    import changeAddress from './changeAddress.vue'

    let reg = /^(0|86|17951)?(1)[0-9]{10}$/;
    export default {
        props: {},
        data() {
            return {
                pageTitle: '',
                notice: '',
                cityName: '',
                provinceName: '',
                isShow: false,
                form: {
                    id: '',
                    address: '',
                    cityId: '',
                    contactor: '',
                    phone: '',
                    provinceId: ''

                }
            };
        },
        methods: {
            back() {
                this.$router.back()
            },
            changeAddr(){
                this.isShow=true;

            },
            /**
             * 获取收货地址详情
             * @param <string> 收货地址ID
             * */
            getAddress() {
                getAddress({id: this.form.id}).then(data => {
                    if (data.returnCode == '000000') {
                        this.form = {
                            id: this.form.id,
                            address: data.result.address,
                            cityId: data.result.cityId,
                            contactor: data.result.contactor,
                            phone: data.result.phone,
                            provinceId: data.result.provinceId
                        }
                        this.provinceName = data.result.provinceName;
                        this.cityName = data.result.cityName;
                       // this.getCity(data.result.provinceId);
                    }
                })
            },

            save() {
                if (this.verify()) {
                    if(this.form.id=='add'){//添加转化一下，传入add springmvc 转化失败
                        this.form.id='';
                        console.log(this.form.id);
                    }
                    updateAddress(this.form).then(data => {
                        if (data.returnCode == '000000') {
                            window.history.back();
                        }
                    })
                }
            },
            verify() {
                if (this.form.contactor == '') {
                    this.notice = '收货人姓名不能为空';
                    return false;
                }
                if (!reg.test(this.form.phone)) {
                    this.notice = '输入正确的手机号码';
                    return false;
                }
                this.notice = '';
                return true;
            }
        },
        filters: {},
        created() {
            this.form.id = this.$route.params['addressId'];
            this.pageTitle = this.form.id == 'add' ? '新增地址' : "编辑地址";
            this.getAddress();
        },
        mounted() {

        },
        components: {
            changeAddress
        }
    };
</script>
<style lang="less" scoped>
    @import "./address.less";
</style>
